<template>
  <div class="remitted">
    <div class="nav">
      <el-button @click="$router.push('/refund-trade/remit')" style="width:100px;">待打款</el-button>
      <el-button type="primary" style="width:100px;">已打款</el-button>
    </div>

    <div class="top">
      <el-row>
        <el-col :span="5">
          <div class="grid-content bg-purple-dark">
            <el-input placeholder="订单号" v-model="orderNum" size="mini" style="width: 255px">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-col>

        <el-col :span="8" :push="10">
          <div class="grid-content bg-purple-dark">
            <span style="color:#333333;font-size:12px">下单时间：</span>
            <el-date-picker
              v-model="beginTime"
              type="date"
              size="mini"
              placeholder="选择日期">
            </el-date-picker>
            <span>—</span>
            <el-date-picker
              v-model="endTime"
              type="date"
              size="mini"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-col>

        <el-col :span="1" :push="10">
          <div class="grid-content bg-purple-dark">
            <!-- <el-button type="primary" size="small">导出</el-button> -->
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="orderMsg">
      <el-table
        :data="tableData"
        border
        height="650px"
        style="width: 100%">
        <el-table-column
          align="center"
          prop="orderNum"
          label="订单号"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="RefundTime"
          label="打款时间"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="refundWay"
          label="打款方式">
        </el-table-column>
        <el-table-column
          align="center"
          prop="refundAccound"
          label="打款账号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="refundName"
          label="认证姓名">
        </el-table-column>
        <el-table-column
          align="center"
          prop="refundMoney"
          label="金额">
        </el-table-column>
        <el-table-column
          align="center"
          label="打款凭证">
          <el-button type="primary" size="mini" style="width:70px;">查看</el-button>
        </el-table-column>
      </el-table>
    </div>
    <div class="paging">
      <el-pagination
        background
        :page-size="10"
        layout="total, prev, pager, next"
        :total="100">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Remitted',
  data() {
    return {
      orderNum: '',
      beginTime: '',
      endTime: '',
      tableData: [
        {
          orderNum: '265465123451',
          RefundTime: '65621683512651',
          refundWay: '65621683512651',
          refundAccound: '65621683512651',
          refundName: '65621683512651',
          refundMoney: '65621683512651'
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
  .remitted{
    margin:20px 0 0 20px;
    .nav{
      margin-top:20px;
    }
    .top{
      margin-top:20px;
    }
    .orderMsg{
      width:99%;
      margin-top:20px;
    }
    .paging{
      float:right;
      margin-top:20px;
    }
  }
</style>
